<template>
  <div>
    <content-list :list="contentList" :pages="pages" :current-page="currentPage" :pageSize="pageSize"
                  @changePage="changePage($event)"
                  v-on:search="search($event)"></content-list>
    <el-card class="box-card" shadow="never" style="text-align: center; margin-top: 10px; font-size: 14px; width: 100%">
      您的任何疑问、建议都可以反馈到
      <el-link href="mailto:763396567@qq.com">763396567@qq.com</el-link>
      <br>
      <el-link href="https://beian.miit.gov.cn">京ICP备2020034015号</el-link>
    </el-card>
  </div>
</template>

<script>
import ContentList from "../components/ContentList";

const axios = require('axios');
export default {
  components: {
    "content-list": ContentList
  },
  mounted: function () {
    this.reload();
  },
  methods: {
    search(content) {
      this.searchContent = content;
      this.currentPage = 1;
      this.reload();
    },
    changePage(page) {
      this.currentPage = page;
      this.reload();
    },
    reload() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios.get("/api/content/list_contents?pageNum=" + this.currentPage + "&pageSize = 20&content=" + this.searchContent)
        .then((res) => {
          console.log(res)
          if (res.data.code === 200) {
            this.contentList = res.data.data.list;
            this.currentPage = res.data.data.currentPage;
            this.pages = res.data.data.pages;
            this.pageSize = res.data.data.pageSize;
          } else {
            this.$message(res.data.msg);
          }
          loading.close();
        })
        .catch((err) => {
          this.$message.error(err.data.msg);
          loading.close();
        });
    }
  },
  data() {
    return {
      contentList: [],
      pages: 1,
      currentPage: 1,
      pageSize: 1,
      searchContent: '',
      readCount: 0
    };
  }
}
</script>

<style>
</style>
